<template>
  <div class="header">
    <a-layout-header class="layout-header" style="background: #fff; padding: 0">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="collapsedEvent"
        size="30px"
      />
      <div class="menu-icon">
        <a-icon
          :type="isFull ? 'fullscreen-exit' : 'fullscreen'"
          style="font-size: 30px; margin-right: 24px"
          @click="fullScreen"
        />
        <a-icon type="apple" style="font-size: 30px; margin-right: 24px" />
        <span style="margin-right: 24px">
          <a-badge :count="1">
            <a-popover v-model="visible" title="操作" trigger="click">
              <a-avatar shape="square" icon="user" />
              <div class="btn" slot="content">
                <a @click="logOut">退出登陆</a>
              </div>
              <div class="btn" slot="content">
                <a @click="hide">关闭</a>
              </div>
            </a-popover>
          </a-badge>
        </span>
      </div>
    </a-layout-header>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
@Component
export default class Header extends Vue {
  private debugMode: any;
  private visible = false;
  private isFull = false;
  @Prop() private collapsed!: boolean;
  @Emit('collapsedEvent')
  public collapsedEvent() {
    if (this.debugMode.debug) {
      console.log('hidden or show');
    }
  }
  public hide() {
    this.visible = false;
  }
  public logOut() {
    localStorage.clear();
    this.$router.push('/login');
  }
  public fullScreen() {
    const element = document.documentElement;
    if (!this.isFull) {
      element.requestFullscreen();
      this.isFull = true;
    }else{
       document.exitFullscreen();
       this.isFull = false;
    }
  }
}
</script>

<style scoped lang="less">
.header {
  .layout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
    }
    .trigger:hover {
      color: #1890ff;
    }
    .menu-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        padding: 10px;
        margin-top: 10px;
      }
    }
  }
}
</style>
